AWS Cloud9 上で起動した Vite の開発サーバーをプレビューする

#Vite

#AWS Cloud9

若槻龍太

2024.01.04

こんにちは、CX 事業本部 Delivery 部の若槻です。

Vite は、フロントエンドアプリケーションの高速なビルドや開発サーバーの実行を可能にする開発環境を提供するツールです。

今回は、クラウド上で利用できる IDE を簡単に構築できる AWS Cloud9 上で Vite の開発サーバーを起動してプレビューしてみました。

試してみた

Cloud9 環境の作成

AWS Cloud9 の環境を作成します。今回は以下の設定で作成しました。

接続タイプ：AWS Systems Manager (SSM)
インスタンスタイプ：t2.micro
プラットフォーム：Amazon Linux 2023

また環境の作成は下記を参考に AWS CDK で行いました。

コンソールから手動で作成する場合は下記を参考にしてください。

作成した Cloud9 環境の IDE に接続できました。

Vite プロジェクトの作成

Vite の Getting Started を参考に、Vite プロジェクトを作成します。一旦次の設定で作成しました。

パッケージ管理ツール：npm
フレームワーク：Vanilla
バリアント：TypeScript

$ npm create vite@latest -y
✔ Project name: … vite-project
✔ Select a framework: › Vanilla
✔ Select a variant: › TypeScript

Scaffolding project in /home/ec2-user/environment/vite-project...

Done. Now run:

  cd vite-project
  npm install
  npm run dev

作成したプロジェクトに移動して、依存関係をインストールします。

cd vite-project
npm install

Vite 開発サーバーの起動

Vite の開発サーバーを起動して、フロントエンドのプレビューを表示してみます。

npm run dev コマンドを実行します。

トップメニューの Preview > Preview Running Application をクリックします。

すると通知モーダルが表示され、アプリケーションのプレビュー表示も失敗しています。

仮想ファイルシステム（VFS：Virtual File System）への接続が存在しないとのことです。

Oops
VFS connection does not exist

通知モーダルによると、サードパーティークッキーが許可されていないため、許可する必要があるとのことです。

Third-party cookies disabled

You can't access preview functionality because your browser blocks third-party cookies (also known as cross-site tracking). To use previews, allow third-party cookies and reload your IDE.

AWS Cloud9 のドキュメントを見ると、各種ブラウザのサードパーティクッキーの許可方法が紹介されています。

Application preview or file preview notice: "Third-party cookies disabled" - Troubleshooting AWS Cloud9 - AWS Cloud9

今回使用していたブラウザは Safari です。Safari の場合は Settings > Privacy > Website tracking の Prevent cross-site tracking のチェックを外します。

サードパーティクッキーの許可後に再度サーバーを起動してプレビューを表示すると、今度はアプリケーションが起動していない旨のエラーが表示されました。

Oops
No application seems to be running here!

AWS Cloud9 のドキュメントを再度見ると、プレビューに使用できるポート番号および IP アドレスには以下の制限があるとのことです。

Run an application - Previewing running applications in the AWS Cloud9 Integrated Development Environment (IDE) - AWS Cloud9

Before you can preview your application from within the IDE, your application must be running in the AWS Cloud9 development environment. It must use HTTP over the following ports:

8080

8081

8082

All of the above ports must use the IP address of 127.0.0.1 localhost, or 0.0.0.0.

vite.config.js を作成して次のように記述します。ポート番号 8080 を使用するように変更しています。

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    port: 8080
  }
})

再度サーバーを起動すると、今度はプレビューを正常に表示できました。

ちなみにこのときのプレビューの URL は次のようになっていました。

https://< EnvironmentID >.vfs.cloud9.ap-northeast-1.amazonaws.com/

ここまでのプレビューの表示は IDE 内での表示でしたが、外部のブラウザからもプレビューを表示できます。プレビュー右上のリンクボタンをクリックします。

すると前述と同じ URL でプレビューが表示できました。

ちなみにこのプレビューの表示は、インバウンドアクセスが許可されているわけではなく、サードパーティクッキーにより実現されています。そのためブラウザの設定によってはプレビューが正常に行われないという挙動が発生します。

その他

ポート番号を指定する別の方法

サーバー起動時のポート番号の指定は --port オプションでも可能です。

Command Line Interface | Vite

次のように実行します。

npm run dev -- --port 8080

ディスクサイズの拡張

Cloud9 環境の既定のディスクサイズは 10GB です。Vite プロジェクトを今回の設定で作成した場合、そのうちの約 70% が使用されます。

$ df -h
Filesystem      Size  Used Avail Use% Mounted on
devtmpfs        4.0M     0  4.0M   0% /dev
tmpfs           3.9G     0  3.9G   0% /dev/shm
tmpfs           1.6G  8.5M  1.6G   1% /run
/dev/xvda1       10G  7.0G  3.1G  70% /
tmpfs           3.9G     0  3.9G   0% /tmp
/dev/xvda128     10M  1.3M  8.7M  13% /boot/efi
tmpfs           794M     0  794M   0% /run/user/1000

ディスクサイズが不足する場合は次で紹介している方法で簡単にサイズを拡張できます。